<template>
<md-card>
  <md-card-header>
    <md-card-media md-medium>
      <img :src="listData.thumb" alt="thumb">
    </md-card-media>
    <md-card-header-text>
      <div class="md-title">{{listData.title}}</div>
      <div class="md-subhead">{{listData.uploader}}</div>
      <md-chip :class="listData.category">{{listData.category.toUpperCase()}}</md-chip>
    </md-card-header-text>
  </md-card-header>
</md-card>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: ['listData']
}
</script>
<style scoped>
.md-card .md-title {
  font-size: 14px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}
.md-card {
  overflow: hidden
}
.md-card .md-card-header .md-card-media {
  margin-left: 0
}
.md-card .md-card-header .md-card-header-text {
  margin-left: 16px
}
.md-chip {
  border-radius: 0px;
  color: #ffffff
}
.md-chip.Western {
  background: #4caf50
}
.md-chip.Non-H {
  background: #2196f3
}
.md-chip.Manga {
  background: #ff9800
}
.md-chip.Doujinshi {
  background: #ff9800
}
</style>
